/* 
	File: screen.css
		Communit.as Default Theme for Friend Factory

	About: Author
		Cory Duncan, Rich Joslin
*/

body {
	background: #ddd url( '../images/bg.gif' ) repeat-y top center;
	margin: 0;
	padding: 0;
}

a { color: #3b5998; }

p { margin: 0; padding: 0; }

div.container {
	position: relative;
	width: 840px;
}

/*
	ID Selector: #accessibility
		Hides the accessibility element. This should not be tampered with.
*/
#accessibility {
	font-size: 1px;
	position: absolute;
	top: -9999px;
}

h1, h2, h3 { text-transform: lowercase; }

div.title h1 { background-color: #ccc; border-right: solid 486px #ddd; color: #555; font-size: 30px; margin: 0; padding: 24px 16px 10px 16px; }
div.title h2 { background-color: #eee; color: #606060; font-size: 14px; margin: 0; padding: 6px 18px; }
h3 { background-color: #ddd; color: #606060; margin: 0; padding: 6px 18px; }
h3 { background-color: transparent; }

#header {
	background: #ddd;
	padding: 14px 0 0 0;
}

#logo {
	background: url( '../images/friend-factory-logo.png' ) no-repeat 0 0;
	height: 73px;
	margin: 0 0 10px 16px;
	padding: 0;
	position: relative;
	text-indent: -9999px;
	width: 382px;
}
#logo a {
	height: 73px;
	left: 0;
	position: absolute;
	top: 0;
	width: 382px;
}

#utility {
	position: absolute;
	right: 24px;
	text-align: right;
	top: 20px;
	width: 300px;
}

#nav {
	background: url( '../images/nav-bg.gif' );
	border-top: 2px #3b5998 solid;
	display: block;
	height: 22px;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0 0 0 8px;
}
#nav li {
	float: left;
	margin: 0;
	padding: 0;
}
#nav li a {
	color: #404040;
	display: block;
	font-weight: bold;
	height: 20px;
	padding: 2px 10px 0 10px;
	text-align: center;
	text-decoration: none;
}
#nav li a:hover {
	background: url('../images/nav-bg-on.gif');
	color: #3b5998;
}

#content {
	clear: both;
	overflow: auto;
}

div.inner { background-color: #fff; margin: 0; padding: 18px; }

.tool-tip {
	background: #eef;
	border: 1px solid #666;
	color: #000;
	font-size: 11px;
	line-height: 1.25em;
	opacity: 0.9;
	width: 170px;
	z-index: 13000;
}
.tool-title {
	font-weight: bold;
	margin: 0;
	padding: 6px 4px 0;
}
.tool-text {
	padding: 0 4px 2px;
}

fieldset { background-color: #fff; border: 0; margin: 0; padding: 18px; }
fieldset div.field div.label { font-weight: bold; }
fieldset div.field div.input ul { list-style-type: none; margin: 0; }

label, .label { 
	color: #333;
	float: left;
	margin: 4px 10px 0 0;
	text-align: right;
	width: 100px;
	}
label em { color: #ccc; display: block; font-style: normal; font-size: 9px; font-family: Verdana, Sans-serif; }
label.caption { width: 50px; }
label.hide { display: none; }
input.text { width: 190px; }
input.text, textarea, select { 
	background: #eee;
	border: 1px solid #ccc;
	color: #333;
	font: 12px/normal Helvetica, Arial, Sans-serif;
	margin: 0;
	padding: 3px 4px 4px;
	}
select { line-height: 1.25em; padding: 2px; }
#sub .full select { width: 190px; }
.birthday select { margin: 0 4px 0 0; }
textarea { line-height: 1.25em; height: auto; overflow: auto; width: 190px; }
textarea.comment { height: 30px; }
.field { margin: 0 0 6px; overflow: hidden; width: 100%; }
.input { float: left; }
.input input.text, .input textarea{ width: 190px; }
.input label { float: none; margin: 0; text-align: left; width: auto; }
.radios { width: 300px; }
.radios label {
	float: left;
	font-size: 11px;
	line-height: 1em;
	margin: 0 0 0.5em;
	width: 33%;	
	}
.radios input { margin-left: 0; padding-left: 0; }
.txt .input { margin: 0.3em 0 0; width: 280px; }
.full textarea { width: 404px; }

div.submit        { background-color: #fff; display: block; text-align: center; }
div.submit button { width: 200px; }

div.sec {
	clear: both;
	overflow: hidden;
}
ul.thumbs        { list-style-type: none; background-color: #ddd; margin: 0; overflow: auto; padding: 20px 0 0 20px; }
ul.thumbs li     { float: left; padding: 0 12px 12px 0; text-align: center; }
ul.thumbs li a   { text-decoration: none; }
ul.thumbs li img { display: block; }

div.people li.browse-all a {
	background-color: #888;
	color: white;
	display: block;
	font-weight: bold;
	height: 64px;
	line-height: 30px;
	text-align: left;
	text-decoration: none;
	text-indent: 10px;
	width: 140px;
}
div.people li.browse-all a:hover {
	background-color: #3b5998;
	color: white;
}

div.paging               { background-color: #ccc; color: #3b5998; overflow: auto; }
div.paging ul            { list-style-type: none; margin: 0; overflow: auto; padding: 0; }
div.paging ul li         { display: inline; float: left; }
div.paging ul li.pages   { padding: 6px 18px; }
div.paging ul li a       { display: block; font-weight: bold; padding: 6px 18px; }
div.paging ul li a:hover { background-color: #bbb; }

/*
                        div#content { background-color: #bbb; border-bottom: solid 20px #ddd; }
body.default-user-index div#content { background-color: #eee; }
*/

a.more { background-color: transparent; display: block; text-align: center; }

div#content div#sub { float: left; width: 354px; }
div#content div#main { float: right; width: 486px; }

div.media img { display: block; margin: 0; padding: 0; }

.toggler { cursor: pointer; }
.toggler:hover { text-decoration: underline; }
.stretcher { visibility: hidden; }

th { background-color: #ccc; }

#footer {
	clear: both;
	margin: 30px 0 0 0;
	text-align: center;
}
